<template>
  <div>
    <r-search ref="search" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"
      :inline="true" />

    <div><span>充值总金额:{{ params.topUpMoney || '0.00' }}</span> <span class="ml50">赠送总金额：{{ params.outMoney || '0.00'
    }}</span>
    </div>

    <r-table class="mt20" :isPagination="true" :isHandle="true" :tableData="tableData" :tableCols="tableCols"
      :tablePage="pagination" :loading="tableLoading" :tableHandles="tableHandles" :isSelection="false"
      @refresh="page()" />

  </div>
</template>

<script>

export default {
  components: {

  },
  data() {
    return {

      searchData: {
        orderNo: '',
        phone: '',
        status: '',
        beginTime: '',
        endTime: ''
      },
      searchForm: [
        { type: "input", placeholder: "订单编号", prop: "orderNo", width: 200 },
        { type: "input", placeholder: "用户手机号", prop: "phone", width: 200 },
        {
          type: "date", placeholder: "开始日期", prop: "beginTime", width: 180, change: (val) => { this.searchData.beginTime = val }
        },
        {
          type: "date", placeholder: "结束日期", prop: "endTime", width: 180, change: (val) => { this.searchData.endTime = val }
        },
        {
          type: "select", placeholder: "订单状态", prop: "status", width: 200, options: [
            { label: '充值失败', value: 1 },
            { label: '充值成功', value: 2 }
          ]
        },
      ],
      searchHandle: [
        { type: 'primary', label: '搜索', handle: e => this.getData(), },
        // {type:'primary',label:'重置', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "订单编号", prop: "orderNo", },
        { label: "用户昵称", prop: "userName", },
        { label: "用户手机号", prop: "phone", },
        { label: "充值金额", prop: "topupMoney", },
        // { label: "总消费金额", prop: "topUpMoney",  },
        { label: "赠送金额", prop: "outMoney", },
        {
          label: "订单状态", prop: "status",
          type: 'html',
          html: (row) => {
            let html = '<p>' +
              (row.status == 0 ? "进行中" :
                row.status == 1 ? "已完成" :
                  row.status == 2 ? "已逾期" :
                    row.status == 3 ? "有退款" : "--")
              + '</p>'
            return html
          }
        },
        { label: "支付时间", prop: "topupTime", },
        { label: "提交时间", prop: "ctime", },
      ],
      tableHandles: [
        // {
        //   label: "导出",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
      ],
      pagination: { limit: 10, offset: 1, total: 1 },

      checkBox: [],


      params: {
        topUpMoney: '',
        outMoney: ''
      }
    };
  },
  created() {

  },
  mounted() {
    this.getData();
  },
  methods: {
    userDetailsCall() {
      this.userDetailsData.show = false;
    },
    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.topupRecord_list({
        orderNo: this.searchData.orderNo,
        phone: this.searchData.phone,
        status: this.searchData.status,
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
      });

      var list = res.rows || [];
      this.tableData = list;
      this.pagination.total = res.total;

      this.params = res.params;
      console.log(res)
      console.log(res.params, 11111)
    },
    page() {
      this.getData();
    }

  },
};
</script>

<style scoped lang="scss">
</style>
